<template>
  <div class="public">
    <header></header>

    <main>
      <ul class="classify-box">
        <li
          @click="filterClassify(null, 0)"
          :class="activeIndex === 0 ? 'active' : ''"
        >
          所有
        </li>
        <li
          v-for="(item, index) in classifyList"
          :key="item.id"
          :class="activeIndex === index + 1 ? 'active' : ''"
          @click="filterClassify(item.label, index + 1)"
        >
          {{ item.label }}
        </li>
      </ul>
      <ul
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="loading"
        class="infinite-list classify-content"
      >
        <li v-for="item in list" :key="item.id" class="infinite-list-item">
          <div
            style="font-weight: 600"
            class="classify-title"
            @click="
              $router.push({
                name: 'detail',
                params: {
                  password: item.password ? item.password : 0,
                  id: item.id,
                  type: 'article',
                  pay: item.pay ? 1 : 0,
                  price: item.pay,
                  title: item.title,
                  odd: item.odd,
                },
              })
            "
          >
            {{ item.title }}
          </div>
          <div>
            <el-icon><Star /></el-icon> {{ item.enjoy }} ·
            <el-icon><View /></el-icon> {{ item.reading }} ·
            <el-icon><Share /></el-icon> 分享
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script setup>
import { apiClassify } from "@/api/classify";
import { apiArticle } from "@/api/article";
import { ref, onMounted } from "vue";

const activeIndex = ref(0);

const classifyList = ref([]);

const list = ref([]);

const page = ref({
  current: 0,
  size: 10,
});

const classify = ref();

const filterClassify = (label, index) => {
  page.value.current = 1;

  page.value.size = 999999;

  classify.value = label;

  activeIndex.value = index;

  list.value = [];

  apiArticle({ ...page.value, classify: classify.value }).then((res) => {
    list.value = res.data;
  });
};

const loading = ref(false);

const loadMore = () => {
  page.value.current++;

  getList();
};

const getList = () => {
  apiArticle(page.value).then((res) => {
    list.value = [...list.value, ...res.data];

    loading.value = res.total < page.value.current * page.value.size;
  });
};

onMounted(() => {
  apiClassify().then((res) => {
    classifyList.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
@import "../../../style/_handle.scss";

main {
  background: #fff;
  @include background_color("background_color1");
  margin-top: 10px;
}

.classify-box {
  height: 55px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f2f7;
}

.classify-content {
  li {
    border-bottom: 1px solid #f0f2f7;
    height: auto;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

li {
  margin: 0 20px;
  cursor: pointer;
  &.active {
    color: #f00 !important;
  }
}

.classify-title:hover {
  color: #f00;
}
</style>
